@charset "UTF-8";

$color: red;
$top: top;

div{
    background: $color;
    border-#{$top}:solid 1px $color;
}
$color2: green;

$color2: blue !default;
// div{
//     background: $color3;
// }
div{
    $color2: yellow;
    background: $color2;
}

//list map

/* 
    $name: value1 value2 value3 valuen;
    nth($name,index)
*/
$arr: 1px 2px 3px 4px;
div{
    width: nth($arr,2);
}

/*
    $name: 10px 20px, 30px 40px;
    $name:(10px 20px) (30px 40px)
*/
$arr2: 10px 20px, 20px 40px;
div{
    margin: nth($arr2,1);
    padding: nth($arr2,2);
    width: nth(nth($arr2,2),1)//arr[2][1]
}

/*
map
    $map: (color:red,top:2px);

*/
$map: (color:red,top:2px);
div{
    background: map-get($map,color);
}

//
div{
    //boder-color -width -style
    border: {
        color:red;
        width:1px;
        style:solid;
    }
}


div{
    color: #fff;
}


.list-group{
    list-style: none;
    padding: 0;
    margin: 0;
    width: 400px;
    .list-item{
        $height:80px;
        width: 100%;
        background: pink;
        height: $height;
        line-height: $height;
        text-align: center;
        &:hover{
            background: yellow;
        }    
        &::before{
            content: "list";
        }
    }
}

//@at-root
.list-group{
    animation: rotate 2s;
    @at-root div{
        color: red;
    }
    div{
        background: red;
        p{
            color: red;
            span{
                font-size: 15px;
                @at-root {
                    em{
                        color: red;
                    }
                    i{
                        font-style: normal;
                    }
                }
            }
        }
    }
    @keyframes rotate{
        0%{
            transform: rotate(0);
        }
        100%{
            transform: rotate(360deg)
        }
    }
}